<template>
  <m-modal
    v-model="visible"
    title="选择"
    class="partsAndPortsModal"
    @cancel="handleCancel"
    @ok="handleOk"
  >
    <m-attr-tip type="DisplayPartsAndPorts"/>
    <div class="_content">
      <div class="body">
        <m-select-tree
          ref='selectTree'
          :treeData="formatedTreeData"
          :showCheckbox="true"
          :sortByName="false"
        />
      </div>
      <div class="side">
        <div class="_header">
          批量操作
        </div>
        <div class='_btn' @click="selectAll">
          <img class="_icon" src = '/statics/icons/simulation/iconselectall.svg'/>
          <span style="vertical-align: text-top;"> 全选</span>
        </div>
        <div class='_btn' @click="clearAll">
          <img class="_icon" src='/statics/icons/simulation/iconclear.png'/>
          <span style="vertical-align: text-top;padding-left:4px">清空</span>
        </div>
      </div>
    </div>
  </m-modal>
</template>
<script>
import { Portal } from 'src/components/common/Portal.vue';
import Modal from 'src/components/common/CustomModal';
import AttrTip from 'src/components/Attribute/comps/AttrTip';
import SelectTree from 'src/components/Attribute/comps/SelectTree.vue';
import { initTree, treeForEach } from 'src/util/common';

const com =  {

  name: 'comp-modal-ibdsetting',
  components: {
    'm-modal': Modal,
    'm-attr-tip': AttrTip,
    'm-select-tree': SelectTree,
  },
  props: {
    title: {
      type: String,
      default: "选择ports和parts"
    },
    blockNode: Object,
    partNodes: {
      type: Array,
    }
  },
  data() {
    return {
      visible: false,
      replaceFields: {
        children: 'child',
        title: 'name',
      },
      checkedIds: [],
      formatedTreeData: []
    };
  },
  mounted(){
    this.visible = true;
    this.checkedIds = this.checkedKeys;
    const rootNode = {
      graphNode: this.blockNode,
      iconPath: this.blockNode.iconPath,
      displayTitle: this.blockNode.displayTitle,
      checked: false,
      disabled: true,
      expand: true,
      disabledCheck: true
    };
    rootNode.children = this.formatTreeData(this.partNodes);
    this.formatedTreeData = [rootNode];
  },
  computed: {
    //// checkedKeys(){
    ////   return this.treeData &&  this.treeData[0].children.map((item) => item.value);
    //// }
  },
  methods: {
    formatTreeData(data) {
      const tree = initTree(data, {
        labelKey: 'displayTitle',
        valueKey: 'id',
        clean: false,
        cutomFn: (node, source) => {
          //// node.scopedSlots = { title: 'default' };
          node.iconPath = source.iconPath;
          node.value = source.value;
          node.graphNode = source;
          node.displayTitle = source.displayTitle;
          node.selected = false;
          node.checked = false;
        }
      });
      console.log("tree", tree);
      return tree;
    },
    selectAll(){
      this.$refs.selectTree.selectAll();
    },
    clearAll(){
      this.$refs.selectTree.clearAll();
    },
    //// onCheck(checkedKeys, info) {
    ////   this.checkedIds = checkedKeys.checked;
    ////   console.log('onCheck', checkedKeys, info);
    //// },
    handleOk(){
      this.visible = false;
      //// const checkedNodes = this.treeData[0].children.filter((item) => {
      ////   return this.checkedIds.includes(item.key);
      //// });
      let data =  this.$refs.selectTree.getCheckedNodes().map(it => it.graphNode);
      this.$emit('sure', data );
    },
    handleCancel(e){
      this.visible = false;
      this.$emit('close', e);
    }
  }
};
export default com;
export const displayPartsPorts = new Portal(com);
export const portal = displayPartsPorts;
</script>
<style lang="scss">
.partsAndPortsModal{
  ._content{
      display: flex;
      flex-direction: row;
      min-height: 500px;
    .header{
      height: 100px;
    }
    .body{
      flex:1 1 500px;
      padding: 8px;
    }
    .side{
      flex:1 1 200px;
      border: 1px solid #B1CEE2;
      ._header{
        height: 24px;
        background: #D4EBF8;
        border: 1px solid #B1CEE2;
        padding:0px 10px;
        font-size: 12px;
        font-weight: 500;
        line-height: 24px;
      }
      ._icon{
        width: 16px;
        height: 16px;
      }
      ._btn{
        cursor: pointer;
        height: 22px;
        padding-left: 10px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        line-height: 22px;
      }
}
}
}
</style>
